<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
<div class="container">
    <h2 class="text-center  text-info">添加用户</h2>
    <form action="" class="form-horizontal">

        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2" >姓 名：</label>
            <div class="col-sm-6">
            <input type="text" class="form-control" id="username" placeholder="请输入姓名" v-model="un">
            </div>
        </div>

        <div class="form-group">
            <label for="sex" class="control-label col-sm-2 col-sm-offset-2" >性 别：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="sex" placeholder="请输入性别" v-model="us">
            </div>
        </div>
        <div class="form-group">
                <label for="age" class="control-label col-sm-2 col-sm-offset-2" >年 龄：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="ua">
                </div>

        </div>

        <div class="form-group text-center">
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add">
            <input type="button" value="删除全部" class="btn btn-primary" v-on:click="cls">
        </div>
    </form>

    <table class="table table-bordered table-hover">
        <caption class="h3 text-center text-info">用户列表</caption>
        <thead>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">姓名</th>
            <th class="text-center">年龄</th>
            <th class="text-center">性别</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(user1,index) in users">
            <td class="text-center">{{index+1}}</td>
            <td class="text-center">{{user1.username}}</td>
            <td class="text-center">{{user1.age}}</td>
            <td class="text-center">{{user1.sex}}</td>
            <td class="text-center"><button class="btn  btn-danger" data-toggle="modal" data-target="#modal" v-on:click="nowIndex=index">删除</button></td>
        </tr>
        </tbody>
    </table>

    <div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">确定吗宝贝</h4>
                </div>
                <div class="modal-body text-center">
                    <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary" data-dismiss="modal" v-on:click="del">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script>
    new Vue({
        el:".container",
        data:{
                nowIndex:-1,

            users:[
                {username:"a",age:3,sex:"nan"},
                {username:"b",age:2,sex:"nv"},
                {username:"C",age:1,sex:"nan"}
                ],

            un:"",
            ua:"",
            us:""
        },
        methods:{
            add(){
                this.users.push({username:this.un,age:this.us,sex:this.ua})
            },
            cls(){
               this.users=[]
            },
            del(){
                this.users.splice(this.nowIndex,1);
            }
        }
    })
</script>



</html>